<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            p{
                text-align: center;
                width: 30%;
                height: 30px;
                line-height: 30px;
                background: red;
                margin: 20px auto;
            }
            td{
                width: 120px;
                height: 24px;
                text-align: center;
                line-height: 24px;
                border: 1px solid gray;
            }
            button{
                display: block;
                width: 50px;
                height: 20px;
                border: 1px solid gray;
                margin: 0 auto;
                background: none;
            }
            table{
                margin: 0 auto;
            }
    </style>
    
</head>
<body>
    <p></p>
    <button>开始</button>
    <table>
        <tr>
            <td>姜宇</td>
            <td>高帅</td>
            <td>何小刚</td>
            <td>刘天一</td>
            <td>袁芬友</td>
        </tr>
        <tr>
            <td>成宇</td>
            <td>王帅</td>
            <td>林小刚</td>
            <td>尾天一</td>
            <td>正芬友</td>
        </tr>
        <tr>
            <td>陔宇</td>
            <td>块帅</td>
            <td>打小刚</td>
            <td>没天一</td>
            <td>放芬友</td>
        </tr>
    </table>
</body>
<script>
    var btn = document.getElementsByTagName("button")[0]
    var op = document.getElementsByTagName("p")[0]
    var arr = ["姜宇","高帅","何小刚","刘天一","袁芬友","成宇","王帅","林小刚","尾天一","正芬","友陔宇","块帅","打小刚","没天一","放芬友"]
    var timer
    btn.onclick = function() {
        if(btn.innerHTML=="开始"){
            timer=setInterval(function(){
                var index = parseInt(Math.random()*arr.length)
                op.innerHTML = arr[index]
                var otd =document.getElementsByTagName("td")
                var txt = document.getElementsByTagName("p")[0].innerHTML
                for(var i=0;i<otd.length;i++){
                    if(otd[i].innerHTML==txt){
                        for(var j=0;j<otd.length;j++){
                            otd[j].style.background = "none"
                        }
                        otd[i].style.background= "red"
                    }
                }
            },10)
            btn.innerHTML = "结束"
        }
        else{
            clearInterval(timer)
            btn.innerHTML="开始"
        }
    }
    
</script>
</html>